<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
#down_list li {
	text-align: center;
}

.font_selected {
	color: red;
}

.train_form_input {
	width: 350;
	height: 34px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.hotel_panel {
	display: block;
}
</style>
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${APP_PATH }/static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	$(function() {
		
		$("#train_info").hide();
		$("#hotel_info").hide();
		
		$("#user_do").hover(function() {
			$("#user_do_list").show();
		}, function() {
			$("#user_do_list").hide();
		});

		$("#user_do_list a").hover(function() {
			console.log($(this).text());
			$(this).addClass({
				"background-color" : "red"
			});
		}, function() {
			$(this).removeClass("font_selected");
		});

		$("#toTrainIndex").click(function() {
			window.location.href = "${APP_PATH }/hotelController/toHotelIndex";
		});

		//显示酒店 
		$("#hotel_href").click(function() {
			$("#hotel_info").show();
			$("#train_info").hide();
			$("#plane_info").hide();
			
			$("#hotel_href").addClass('active');
			$("#train_href").removeClass('active');
			$("#plane_href").removeClass('active');
		});

		//显示火车票
		$("#train_href").click(function() {
			$("#train_info").show();
			$("#hotel_info").hide();
			$("#plane_info").hide();
			
			$("#hotel_href").removeClass('active');
			$("#train_href").addClass('active');
			$("#plane_href").removeClass('active');
		});

		//显示飞机票
		$("#plane_href").click(function() {
			$("#plane_info").show();
			$("#train_info").hide();
			$("#hotel_info").hide();
			
			$("#hotel_href").removeClass('active');
			$("#train_href").removeClass('active');
			$("#plane_href").addClass('active');
		});
		
		//飞机票单程显示
		$("#oneWaySelect").click(function(){
			$("#returnDateLabel").hide();
			$("#returnDateInput").hide();
		});
		
		//飞机票往返显示
		$("#goAndBackSelect").click(function(){
			$("#returnDateLabel").show();
			$("#returnDateInput").show();
		});
	});
</script>
</head>
<body>

	<div class="container">
		<!-- 显示上方选择框 -->
		<div class="row" style="background: white;">
			<div class="row" style="background: white; height: 50px;"></div>
			<div class="col-md-3" style="padding-bottom: 10px;">
				<img alt="logo" src="${APP_PATH }/static/images/logo.png">
			</div>
			<div class="col-md-7" style="padding-bottom: 0px;">
				<ul class="nav nav-tabs">
					<li role="presentation" style="font-weight: bold;" class="active" id="plane_href"><a
						href="javascript:void(0);" >飞机票</a></li>
					<li role="presentation" style="font-weight: bold;" id="train_href"><a
						href="javascript:void(0);">火车票</a></li>
					<li style="font-weight: bold;"  id="hotel_href"><a
						href="javascript:void(0);">酒店</a></li>
				</ul>
			</div>
			<div class="col-md-2" style="padding-bottom: 0px;" id="user_do">
				<div class="dropdown">
					<img src="${APP_PATH }/static/images/timg.jpg" />
					<div
						style="display: none; padding: 0px; margin: 0px; border: none;"
						id="user_do_list">
						<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"
							style="display: block;" id="down_list">
							<li><a href="">飞机票订单</a></li>
							<li role="separator" class="divider"></li>
							<li id="trainId"><a href="">火车票订单</a></li>
							<li role="separator" class="divider"></li>
							<li id="hotelId"><a href="">酒店订单</a></li>
							<li role="separator" class="divider"></li>
							<li id="loginId"><a href="">登陆|注册</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<br /> <br />
		<!-- 显示酒店  -->

		<div
			style="background-image: url('${APP_PATH }/static/images/hotel/hotel_index.jpg');"
			id="hotel_info">
			<br /> <br /> <br /> <br /> <br /> <br />
			<div class="row" id="hotel_info">
				<div class="col-md-6 col-md-offset-3">
					<label>入住城市</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="" value=""
						class="train_form_input" style="width: 350px; height: 32px;" />
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<label>入住日期</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="theday"
						value="" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<label>离店日期</label>&nbsp;&nbsp;&nbsp;<input id="theday"
						value="" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<label>搜关键字</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="" value=""
						class="train_form_input" style="width: 350px; height: 32px;" />
				</div>
			</div>
			<br />

			<div class="row">
				<div class="col-md-1 col-md-offset-7">
					<button type="button" class="btn btn-info">搜索</button>
				</div>
			</div>
			<br /> <br /> <br /> <br /> <br /> <br />
		</div>

		<!-- 显示飞机票 -->
		<div
			style="background-image: url('${APP_PATH }/static/images/plane/plane_index.jpg');"
			id="plane_info">
			<br /> <br /> <br /> <br /> <br /> <br />
			<div class="row" id="hotel_info">
				<div class="col-md-6 col-md-offset-3">
					<label>航程类型</label>&nbsp;&nbsp;&nbsp;&nbsp;
					<label>
    					<input type="radio" name="optionsRadios" id="oneWaySelect" value="option1" checked>
    					单程
  					</label>
  					<label>
    					<input type="radio" name="optionsRadios" id="goAndBackSelect" value="option1" >
    					往返
  					</label>
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<label>出发城市</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="" value=""
						class="train_form_input" style="width: 130px; height: 32px;" />&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<label>到达城市</label>&nbsp;&nbsp;&nbsp;<input id="" value=""
						class="train_form_input" style="width: 130px; height: 32px;" />
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<label>出发日期</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="theday"
						value="" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<label id="returnDateLabel" style="display: none;">返回日期</label>&nbsp;&nbsp;&nbsp;<input  id="returnDateInput"
						value="" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px; display: none;" />
				</div>
			</div>

			
			<br />

			<div class="row">
				<div class="col-md-1 col-md-offset-7">
					<button type="button" class="btn btn-info">搜索</button>
				</div>
			</div>
			<br /> <br /> <br /> <br /> <br /> <br />
		</div>


		<!-- 显示火车票 -->
		<div style="background-image: url('${APP_PATH }/static/images/train/train_index.jpg');"
			id="train_info">
			<br /> <br /> <br /> <br /> <br /> <br />
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<label>出发日期</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="theday"
						value="" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<label id="returnDateLabel" style="display: none;">
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<label>出发城市</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="" value=""
						class="train_form_input" style="width: 130px; height: 32px;" />&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<label>到达城市</label>&nbsp;&nbsp;&nbsp;<input id="" value=""
						class="train_form_input" style="width: 130px; height: 32px;" />
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-1 col-md-offset-7">
					<button type="button" class="btn btn-info">搜索</button>
				</div>
			</div>
			<br /> <br /> <br /> <br /> <br /> <br /> <br />
		</div>

		<br /> <br />

		<!-- 结尾 -->
		<div class="row">
			<div class="col-md-3 col-md-offset-5"><label>©2018 SUXING 京ICP证666666号</label>
			</div>
		</div>

	</div>

</body>
</html>